<template>
  <div class="cart">
    <div class="list" v-if="carList.length">
      <van-checkbox
        v-for="item in carList"
        :key="item.goods_id"
        v-model="item.checked"
      >
        <van-card
          :price="item.market_price + '.00'"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
          :num="item.number"
        />
      </van-checkbox>
    </div>
    <van-empty v-else image-size="10rem" description="暂无购物车数据" />
    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { getCarList } from "../server/car";
import { showToast } from "vant";

let carList = ref([]);
function onSubmit() {
  showToast("跳转支付");
}
function onClickLink() {
  console.log(222);
}
let checked = computed({
  get() {
    return carList.value.every((item) => item.checked == 1);
  },
  set(v) {
    let flag = v ? 1 : 0;
    return carList.value.forEach((item) => (item.checked = flag));
  },
});
let totalPrice = computed(() => {
  return carList.value.reduce((price, next) => {
    return (
      price + (next.checked == 1 ? next.market_price * next.number : 0) * 100
    );
  }, 0);
});
onMounted(() => {
  getCarList().then((res) => {
    console.log(res);
    carList.value = res.data.cartList;
  });
});
</script>

<style scoped>
.van-submit-bar {
  margin-bottom: 3.75rem;
}
.cart {
  width: 100%;
  height: calc(100% - 9.0625rem);
  overflow-y: hidden;
}
.cart > .list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.cart > .list .van-checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:deep(.van-checkbox__label) {
  flex: 1;
  margin: 0;
  margin-left: 0.625rem;
}
</style>
